<template>

  <el-row>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="queryList">搜索</el-button>

      </el-form-item>
    </el-form>
  </el-row>

  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button type="primary" plain icon="Plus" size="small" @click="showEdit = true">新增</el-button>
    </el-col>

  </el-row>

  <el-row v-loading="loading">

    <el-table :data="tableData">

      <!-- <el-table-column prop="userid" label="用户id" /> -->
      <el-table-column prop="userid" label="用户id" type="index" width="120"/>
      <el-table-column prop="username" label="用户名" align="center"/>
      <el-table-column prop="nickname" label="昵称"/>

    </el-table>
    <el-pagination layout="sizes ,prev, pager, next, jumper, ->, total," :total="queryParams.total"
                   v-model:page-size="queryParams.size" v-model:current-page="queryParams.current"
                   @current-change="queryList"
                   @size-change="queryList" :page-sizes="[2, 3, 5, 10, 20, 30, 40, 50, 100]"/>
  </el-row>


  <el-dialog v-model="showEdit" title="用户编辑" style="width: 800px;">
    <Edit v-if="showEdit" v-model:showEdit="showEdit"/>
  </el-dialog>


</template>

<script setup name="User">
import {onMounted, ref} from 'vue'

import Edit from '../edit.vue'
//导入crud的API接口
import {listUser} from '@/api/permission/user/index'


//定义数据

//表格数据
const tableData = ref([])

//表格 loading 加载状态， true 转圈， false 取消loading

const loading = ref(false);

//是否展示修改 的表单
const showEdit = ref(false)

//查询条件
const queryParams = ref({
  nickname: '',
  size: 10,
  current: 1,
  total: 0
})


/**
 * 查询分页表格
 */
// function queryList() {
//     loading.value = true
// listUser(queryParams.value)

//     .then(page => {
//         loading.value = false
//         tableData.value = page.records;
//         queryParams.value.total = page.total;
//     })
//     .catch(error => {
//         console.log("errr" + error)
//     })


// listUser(queryParams.value)

//     .then(page => {
//         loading.value = false
//         tableData.value = page.records;
//         queryParams.value.total = page.total;
//     },error => {
//         console.log("errr" + error)
//     })


// }

/**
 * 使用await 关键字，将返回Promise对象的异步方法变成同步方法
 */
async function queryList() {
  loading.value = true
  try {
    const page = await listUser(queryParams.value)
    loading.value = false
    tableData.value = page.records;
    queryParams.value.total = page.total;
  } catch (e) {

  }
}


//加载当前页面完成之后 查询
onMounted(() => {
  queryList()
})


</script>

<style scoped></style>
